<template>
	<view class="my-release">
		<view class="custom-nav-bar">
			<!-- 返回按钮 -->
			<view class="nav-back" @click="goBack">
				<image src="/static/back.png" mode=""></image>
			</view>
			<!-- 页面标题 -->
			<view class="nav-title">我的发布</view>
		</view>
		<div class="tablist">
			<div class="tabItem" v-for="(item, index) in tabList" :key="index" @click="onTabChange(index)">
				<p :class="currentIndex === index ? 'active' :''">
					{{item.name}} ({{item.num}})
				</p>
				<span v-if="currentIndex === index"></span>
			</div>
		</div>
		<div class="releaselist">
			<div class="releaseItem">
				<div class="releaseitemtop">
					<div class="user">
						<div class="userleft">
							<image src="/static/mine/room.png" mode="widthFix"></image>
							<div class="message">
								<p>PM-liu</p>
								<span>IP广东广州</span>
							</div>
						</div>
						<p class="zhuanzu">房屋转租</p>
					</div>
					<div class="roominfo">
						<p>房子租金：<span>800元/月</span></p>
						<p>转租户型：<span>一室一厅</span></p>
						<p>合同方式：<span>重签合同</span></p>
					</div>
				</div>
				<div class="releaseitemcenter">
					<image src="/static/mine/phone.png" mode="widthFix"></image>
					<p>打电话</p>
				</div>
				<div class="releaseitembottom">
					<!-- <u-album :urls="imglist"></u-album> -->
					<div class="imagelist">
						<image src="/static/mine/roompic.png" mode="widthFix"></image>
						<image src="/static/mine/roompic.png" mode="widthFix"></image>
						<image src="/static/mine/roompic.png" mode="widthFix"></image>
						<image src="/static/mine/roompic.png" mode="widthFix"></image>
					</div>
					<div class="address">
						<image src="/static/mine/dingwei.png" mode="widthFix"></image>
						<p>柯木郎背坪岚牌街31号-精装阳光大单间</p>
					</div>
					<div class="desc">
						<span>1093浏览，4分享，13:37刷新</span>
						<image src="/static/mine/pinglun.png" mode="widthFix"></image>
					</div>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentIndex: 0,
				tabList: [
					{
						name: '显示',
						num: 3
					},
					{
						name: '待审核',
						num: 0
					},
					{
						name: '已过期',
						num: 0
					}
				]
			}
		},
		methods: {
			onTabChange (index) {
				this.currentIndex = index;
			},
			goBack () {
				uni.navigateBack({ delta: 1 });
			}
		}
	}
</script>

<style lang="scss" scoped>
.custom-nav-bar {
	height: 50px; /* 导航栏高度 */
	display: flex;
	align-items: center;
	color: #000;
	padding: 30px 16px 16px 16px;
}
.nav-back {
	flex: 0 0 auto;
	cursor: pointer;
	image{
		width: 12px;
		height: 24px;
		// padding-left: 16px;
	}
}
.nav-title {
	flex: 1 1 auto;
	text-align: center;
	font-family: PingFangSC, PingFang SC;
	font-weight: 500;
	font-size: 17px;
	color: #000000;
}
.tablist{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 36px;
	.tabItem{
		height: 35px;
		p{
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 13px;
			color: #606060;
		}
		.active{
			font-size: 15px;
			color: #333333;
			font-weight: bold;
		}
		span{
			width: 16px;
			height: 3px;
			background: linear-gradient(#0079FF 0%, #1CA9FE 100%);
			box-shadow: 0px 2px 4px 0px rgba(0,149,248,0.3);
			border-radius: 2px;
			display: block;
			margin: 6px auto;
		}
	}
}
.releaseItem{
	width: 88%;
	padding: 12px;
	box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.01);
	border-radius: 12px;
	background: #FFFFFF;
	margin: 20px auto;
	.releaseitemtop{
		.user{
			display: flex;
			justify-content: space-between;
			.userleft{
				display: flex;
				image{
					width: 58px;
					height: 58px;
					margin-right: 10px;
				}
				.message{
					p{
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 16px;
						color: #222222;
						line-height: 30px;
					}
					span{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 12px;
						color: #999999;
						display: block;
					}
				}
			}
			.zhuanzu{
				width: 54px;
				height: 20px;
				background: rgba(0,149,248,0.08);
				border-radius: 3px;
				border: 1px solid #0095F8;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 11px;
				color: #0095F8;
				text-align: center;
				line-height: 20px;
			}
		}
		.roominfo{
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 15px;
			color: #4F5963;
			line-height: 26px;
			span{
				color: #000;
			}
		}
	}
	.releaseitemcenter{
		width: 100%;
		height: 52px;
		background: #E3F5FF;
		border-radius: 8px;
		margin: 12px auto;
		display: flex;
		align-items: center;
		image{
			width: 16px;
			height: 16px;
			margin-right: 10px;
			margin-left: 38%;
		}
		p{
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 14px;
			color: #0095F8;
		}
	}
	.releaseitembottom{
		.imagelist{
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			margin-bottom: 10px;
			image{
				width: 72px;
				height: 72px;
				margin-right: 10px;
			}
		}
		.address{
			display: flex;
			align-items: center;
			padding: 10px 0;
			image{
				width: 16px;
				height: 15px;
				margin-right: 10px;
			}
			p{
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 13px;
				color: #333333;
			}
		}
		.desc{
			display: flex;
			justify-content: space-between;
			align-items: center;
			span{
				display: block;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 12px;
				color: #999999;
			}
			image{
				width: 20px;
				height: 18px;
			}
		}
	}
}
</style>
